<template>
  <h1>1.组件的基本写法</h1>
  <h2>count:{{ count }}</h2>
  <button @click="changeCount">改变count</button>
  <h2>a:{{ a }}</h2>
  <button @click="addA">改变count</button>
</template>

<script lang="ts">
import {defineComponent} from "vue"
export default defineComponent({
  name: "About",
})
</script>

<!-- 
  setup语法糖：
    可以再创建一个script标签,拥有setup属性
    那么这个标签内的环境就是当前组件setup的内部环境
    这个区域所有定义的方法或变量是默认直接暴露的
 -->
<script lang="ts" setup>
    let count = 0;
    let changeCount = () => {
      console.log("事件触发了");
      count++;
    };

    let a = 666
    let addA = () => {
      console.log("a的值修改了");
    }

</script>

<style scoped>
</style>